{% extends 'base.html' %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/static/css/register.css">
{% endblock %}

{% block middle %}
<div style="position:absolute;left:38%;top:30%;text-align:center;">

    <form class="layui-form" action="" style="text-align: left">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" id="user_name_label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text" id="username" name="user_name" required lay-verify="required"
                           placeholder="请输入用户名注意: 用户名必须是字母, 数字, 下划线组合, 不得包含特殊字符, 不得以数字开头" autocomplete="off"
                           class="layui-input" style="width: 360px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" id="passwd_label">密码:</label>
                <div class="layui-input-block">
                    <input type="password" id="passwd" name="password" required lay-verify="required"
                           placeholder="请输入密码" autocomplete="off" class="layui-input" style="width: 360px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" id="passwd_again_label">密码确认:</label>
                <div class="layui-input-block">
                    <input type="password" id="passwd_again" name="password_again" required lay-verify="required"
                           placeholder="请再次输入密码以确认" autocomplete="off" class="layui-input" style="width: 360px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱:</label>
                <div class="layui-input-block">
                    <input id="email" type="text" name="e_mail" autocomplete="off" class="layui-input"
                           style="width: 360px">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机:</label>
                <div class="layui-input-block">
                    <input id="phone" type="text" name="phone_num" autocomplete="off" class="layui-input"
                           style="width: 360px">
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-block">
                    <input id="phone_vcode" type="text" name="phone_vcode" autocomplete="off" class="layui-input"
                           style="width: 360px">
                </div>
            </div>
            <div class="layui-inline">
                <button id="get_phone_vcode" type="button" class="layui-btn layui-btn-normal"
                        onclick="settime(this)">获取手机验证码
                </button>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="srm" style="width: 170px">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary" style="width: 170px">全部清空</button>
            </div>
        </div>

    </form>
</div>

<script src="{{ register_js_path }}" type="text/javascript"></script>

{% endblock %}